<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100svh;
            display: grid;
            place-content: center;
            background: black;
            font-family: system-ui, sans-serif;
            padding: 2rem;
        }

        .material-fill-1 {
            font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 48
        }

        p {
            color: white;
            font-size: 0.8rem;
            text-align: center;
            margin-top: 1rem;
        }

        a {
            color: orange;
        }

        a:hover {
            text-decoration: underline;
        }

        .gallery {
            --_height: 250px;
            --_gap: .5rem;

            --_grid-rows: var(--_height) var(--_height) var(--_height);
            --_height-hover: calc(var(--_height) * 2);
            --_height-not-hover: calc(var(--_height) / 2);

            width: 100%;
            max-width: 800px;
            display: grid;
            gap: var(--_gap);
        }

        @media (min-width:720px) {
            .gallery {
                grid-template-columns: repeat(3, 1fr);
            }

        }

        .gallery>div {
            height: fit-content;
            display: grid;
            grid-template-rows: var(--_grid-rows);
            gap: var(--_gap);
            transition: grid-template-rows 300ms ease-in-out;
        }

        .gallery>div>article {
            position: relative;
        }

        .gallery>div>article>div {
            position: absolute;
            bottom: 0;
            left: 0;
            background: #00000070;
            font-size: 0.65rem;
            color: white;
            display: flex;
            align-items: center;
            gap: .25rem;
            padding: .15rem 0.5rem;

        }

        .gallery>div>article>div>span {
            font-size: 0.7rem;
            color: red;
        }

        .gallery img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gallery>div:has(>article:nth-child(1):hover) {
            --_grid-rows: var(--_height-hover) var(--_height-not-hover) var(--_height-not-hover);
        }

        .gallery>div:has(>article:nth-child(2):hover) {
            --_grid-rows: var(--_height-not-hover) var(--_height-hover) var(--_height-not-hover);
        }

        .gallery>div:has(>article:nth-child(3):hover) {
            --_grid-rows: var(--_height-not-hover) var(--_height-not-hover) var(--_height-hover);
        }

        .gallery>div>article:hover {
            background-color: rgb(151, 152, 201);
            color: #FFF;
        }
    </style>
</head>

<body>
    <section class="gallery">
        <div>
            <article>
                <img src="https://images.pexels.com/photos/104842/bmw-vehicle-ride-bike-104842.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="motorbike 1">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>
            <article>
                <img src="https://images.pexels.com/photos/2116475/pexels-photo-2116475.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="motorbike 2">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>
            <article>
                <img src="https://images.pexels.com/photos/4542987/pexels-photo-4542987.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="notorbike 3">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>

        </div>
        <div>
            <article>
                <img src="https://images.pexels.com/photos/954929/pexels-photo-954929.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="mountains 1">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>
            <article>
                <img src="https://images.pexels.com/photos/950859/pexels-photo-950859.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="hand">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>
            <article>
                <img src="https://images.pexels.com/photos/1741570/pexels-photo-1741570.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="beach">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>

        </div>
        <div>
            <article>
                <img src="https://images.pexels.com/photos/1659438/pexels-photo-1659438.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="man on rock">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>
            <article>
                <img src="https://images.pexels.com/photos/1006121/pexels-photo-1006121.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="trees">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>
            <article>
                <img src="https://images.pexels.com/photos/1785493/pexels-photo-1785493.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                    alt="sky">
                <div><span class="material-symbols-outlined material-fill-1">喜欢的人数:</span>12喜欢</div>
            </article>

        </div>
    </section>
</body>

</html>